<template>
    <div>
        <!-- <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="onClickLeft" /> -->
        <div class="flex justify-center">
            <div class="w-full flex flex-col pt-4">

                <!-- 内容 -->
                <div class="van-doc-demo-block" v-if="!isEmpty">
                    <h2 class="van-doc-demo-block__title font-bold pl-3 ">收货信息</h2>
                    <van-address-edit :area-list="areaList" show-postal show-search-result
                        :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete"
                        save-button-text="确认兑换" delete-button-text="取消" show-delete @change-detail="onChangeDetail">
                    </van-address-edit>

                    <h2 class="van-doc-demo-block__title font-bold p-3 ">兑换信息</h2>

                    <van-cell-group inset>
                        <van-cell style="padding-top:3vw;padding-bottom: 3vw" :value="exchangeInfo.account" />
                        <van-cell style="padding-top:3vw;padding-bottom: 3vw" :value="exchangeInfo.password" />
                    </van-cell-group>
                </div>

                <!-- 空状态 -->
                <van-empty image="http://img.daguohaoli.com.cn/custom-empty-image.png"
                     v-if="isEmpty">
                    <template #description>
                        <view class="title">提交成功</view>
                        <view class="desc">您可以在我的订单中查询单详情或跟踪物流信息</view>
                    </template> 
                    <van-button round plain hairline block type="danger" class="bottom-button bottom-order"
                        @click="goOrder">查看订单</van-button>
                    <van-button round plain hairline block type="primary" class="bottom-button bottom-index"
                        @click="goHome">返回首页</van-button>
                </van-empty>

            </div>
        </div>


        <van-overlay :show="isshow" z-index="999">
            <van-loading size="24px" vertical
                style="top: 50%;display: flex;align-items: center;justify-content: center;">提交中...</van-loading>
        </van-overlay>

    </div>
</template>

<script setup name="Exchange">
import { ref, onMounted } from 'vue';
import { Toast } from 'vant';
import { areaList } from '@vant/area-data';
import { useRouter, useRoute } from 'vue-router';
const $router = useRouter();
import { CommonApi } from '@/api/CommonApi';
import { showToast } from 'vant';


// 兑换
const title = '礼品兑换';

// 返回 
const onClickLeft = () => {
    history.back();
}

// 去订单
const goOrder = () => {
    $router.push('/order');
}

// 去首页
const goHome = () => {
    $router.push('/gift');
}

const isshow = ref(false);

const onSave = (data) => {
    // 判断空
    if (!data.name || !data.tel || !data.addressDetail) {
        Toast('请填写完整信息');
        return;
    }

    const param = {
        receiveName: data.name,
        receivePhone: data.tel,
        receiveAddress: data.province + data.city + data.county + data.addressDetail,
        giftBookProductIds: [giftProdId.value]
    };

    // receiveName 收件人姓名
    // receivePhone 收件人手机号
    // receiveAddress 收件人地址

    isshow.value = true;

    // 提交数据 addOrder
    CommonApi.addOrder(param)
        .then(response => {
            // Toast('兑换成功');
            // showToast({ type: 'success', message: '兑换成功' });
            isEmpty.value = true;
            // $router.push('/order');
        }).finally(() => {
            console.log('finally');
            isshow.value = false;
        });

}
const onDelete = () => {
    // 返回上一级
    $router.back();
}

// 兑换信息 对象
const exchangeInfo = ref({});

// 是否为空
const isEmpty = ref(false);

// 获取url参数
const route = useRoute();
const urlParams = route.query; // 获取URL的参数
// 获取url中的参数id
const giftProdId = ref(urlParams.giftProdId);

// onMounted 如果 giftProdId不为空 获取数据
onMounted(() => {
    if (giftProdId.value) {
        // 获取数据
        CommonApi.getLoginInfo()
            .then(response => {
                exchangeInfo.value = response.data;
            }).finally(() => {
                console.log('finally');
            });
    } else {
        isEmpty.value = true;
    }
});


</script>

<style lang="less">
body {
    background: #f5f5f5;
}

.custom-title {
    color: #1E1E1E;
    font-weight: bold;
}

.van-address-edit__buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    // 按钮间距 左右调换按钮位置
    flex-direction: row-reverse;
    padding-left: 1.3rem;
    padding-right: 1.3rem;

    .van-button {
        width: 49%;
        padding: 0vw;
        line-height: var(--van-button-default-height);

    }

    // 第二个按钮背景色 #B00D0D
    .van-button:nth-child(1) {
        background-color: #B00D0D;
        border-color: #B00D0D;
    }

    // 第二个按钮
    .van-button:nth-child(2) {
        background: #F6F6F6;
        border: 1rpx solid #8C8C8C;
        color: #575757;
    }
}

.van-cell__value {
    text-align: left;
}

.van-empty__bottom {
    width: 100%;
    box-sizing: border-box;
    padding: var(--van-address-edit-padding);
    padding-left: 5vw;
    padding-right: 5vw;
}

.bottom-button {
    height: 40px;
    margin-bottom: 0.5rem;
}

.bottom-order {
    border: 0.01rem solid #B00D0D;
    color: #B00D0D !important;
}

.bottom-index {
    color: #9F9F9F !important;
    border: 0.01rem solid #9F9F9F;
}

.van-empty__description {
    // font-size: 0.8rem !important;
    padding-left: 0px;
    padding-right: 0px;
}


.title {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 2rem;
    color: #B00D0D;
    // margin-bottom: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0rem;
}

.desc {
    font-size: 0.9rem;
    color: #AFAFAF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.van-empty__image img {
    width: 160px;
    height: auto;
}
.van-empty__description {
    margin-top: 0rem;
}
</style>